<template>
    <div class="hotList">
        <div class="mp-group">
            <div class="mp-group-title flex">
                <div class="left flex">
                    <img src="../../../assets/image/hotIcon.png" alt="">
                    <span class="mp-title">本周热门榜单</span>
                </div>
                <div class="right flex">
                    <span class="mp-title-more">全部榜单></span>
                </div>
            </div>
            <ul class="mp-hotsale-list">
                <li class="mp-hotsale-item" v-for="(item,index) in list" :key="index">
                    <div class="mp-fulllink">
                        <img :src="item.imgUrl" alt="">
                        <div class="mp-hotsale-sight">{{item.title}}</div>
                        <div class="mp-hotsale-price">
                            <span class="mpg-price">￥699</span>起
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default{
        name:"HotList",
        props:["list"]
    }
</script>

<style scoped lang="less">
    .flex {
        display: flex;
        justify-content: space-between;
    }
    .mp-group {
        background: #fff;
        padding: .3rem;
        .mp-group-title{

            .left{
                align-items: center;
                .mp-title{
                    display: inline-block;
                    margin-left: .08rem;
                    height: .44rem;
                    color: #212121;
                    font-size: .28rem;
                    line-height: .44rem;
                }
                img{
                    width: .3rem;
                    height: .3rem;
                }
            }
            .right{
                
                .mp-title-more{
                    color: #616161;
                    font-size: .24rem;
                    line-height: .28rem;
                }
            }
        }
        .mp-hotsale-list{
            overflow-x: scroll;
            white-space: nowrap;
            .mp-hotsale-item{
                position: relative;
                display: inline-block;
                padding: .06rem 0 .2rem;
                width: 2rem;
                margin-right: .3rem;
                .mp-fulllink{
                    display: block;
                    width: 100%;
                    height: 100%;
                    img{
                        width: 2rem;
                        height: 2rem;
                    }
                }
                .mp-hotsale-sight {
                    margin-top: .12rem;
                    color: #212121;
                    font-size: .24rem;
                    line-height: .32rem;
                    text-align: center;
                }
                .mp-hotsale-price{
                    color: #616161;
                    font-size: .24rem;
                    line-height: .36rem;
                    text-align: center;
                    .mpg-price{
                        color: #ff8300;
                    }
                }
            }
        }
    }
</style>